<template>
  <Pad class="order-detail">
    <no-data
      v-if="userInfo.bloodStationId == 0"
      :img="require('./img/noData1.png')"
      text="您的单采血浆站还未入驻本平台，请您持续关注～"
    />
    <no-data
      v-else-if="!userInfo.lastDate"
      :img="require('./img/noData2.png')"
      text="平台暂无您的数据，献浆后再来看看哦～"
    />
    <template v-else>
      <v-calendar
        is-expanded
        :disabled-dates="disabledDates"
        @dayclick="dayclick"
        v-on:update:from-page="frompage"
        :attributes="appoint"
      />
      <p class="order-tip">温馨提示：国家规定二次献血浆时间间隔不少于14天！</p>
      <van-cell-group class="links">
        <!-- <van-cell title="恭喜您献浆成功！" title-class="title-class"/> -->
        <van-cell
          :title="`系统已为您匹配好下次献浆时间为${formatDate(item.appointmentTime)},请您及时献浆`"
          title-class="title-class"
          v-for="item in appointRecord"
        />
      </van-cell-group>
    </template>
  </Pad>
</template>

<script>
import Pad from "@/components/pad";
import noData from "@/components/noData";
import { appointRecord, workRecord } from "@/api/order";
import _ from "lodash";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      // 预约时间
      appointRecord: "",
      // 休息日时间
      workRecord: ""
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    appoint() {
      const _this = this;
      if (!this.appointRecord) return [];
      return this.appointRecord.map(m => {
        var time = _this.$moment(m.appointmentTime)
        return {
          dot: "red",
          dates: new Date(time.year(),time.month(),time.date())
        };
      });
    },
    disabledDates() {
      if (!this.workRecord) return [];
      return this.workRecord.map(m => new Date(m.workStartTime));
    }
  },
  mounted() {},
  methods: {
    dayclick(day) {
      console.log(day);
    },
    formatDate(date) {
      return this.$moment(date).format("YYYY-MM-DD");
    },
    frompage: _.debounce(function(page) {
      console.log("page");
      console.log(page);
      appointRecord({ currentDate: `${page.year}-${page.month}-01` }).then(
        ({ data }) => {
          this.appointRecord = data.records;
        }
      );
    }, 500)
  },
  created() {
    // 工作时间
    workRecord({ size: 1000, current: 1 }).then(({ data }) => {
      this.workRecord = data;
    });

    // 献浆预约记录
    // appointRecord().then(({ data }) => {
    //   console.log(data);
    // });
  },
  components: {
    Pad,
    noData
  }
};
</script>

<style lang='scss'>
.order-detail {
  height: 100%;
  .order-tip {
    font-size: 0.266667rem /* 20/75 */;
    color: #999999;
    margin: 0.4rem /* 30/75 */ 0;
    text-align: right;
  }
  .van-cell__title {
    flex: auto;
  }
  .van-cell__value {
    position: absolute;
    width: 1.6rem /* 120/75 */;
    right: 0.533333rem /* 40/75 */;
  }
  .van-cell {
    align-items: initial;
  }
  .title-class {
    font-size: 0.346667rem /* 26/75 */;
    color: #333;
  }
  .label-class {
    font-size: 0.32rem /* 24/75 */;
  }
  .value-class {
    font-size: 0.373333rem /* 28/75 */;
    margin-right: 0.4rem /* 30/75 */;
  }
}
</style>
